// 声明页面中的元素对象
const form = document.querySelector('form')
const phone = document.querySelector('.phone')
const hobbyList = Array.from(document.querySelectorAll('.hobby'))
const hobbyMsg = document.querySelector('.hobby-msg')
const ageSelect = document.querySelector('#age')
const usernameInput = document.querySelector('#username')
const pic = document.querySelector('#pic')
const email = document.querySelector('.email')
// 所有的验证消息显示的span元素
const valid = Array.from(document.getElementsByClassName('valid'))
const password = document.querySelector('.password')
const repassword = document.querySelector('.repassword')
const randomNum = document.querySelector('.randomNum')
const random = document.querySelector('.random')
const birthday = document.querySelector('.birthday')

// 页面加载结束执行的操作
window.onload = function () {
  randomNum.value = getRandomCode()
}

// 当点击submit按钮时，会触发表单提交事件
form.onsubmit = function (e) {
  // e是事件对象
  // console.log(e)
  // 阻止默认事件,表单不会提交
  e.preventDefault()
  // console.log('onsubmit')
  // return false会阻止表单提交
  // 没有return 或 return true 表单就可以提交了
  // return false
  // 验证表单的用户名和爱好是否都为真，如果为真，才能提交表单
  let flag =
    validHobby() &
    validUsername() &
    validAge() &
    validPic() &
    validEmail() &
    validPhone() &
    validPassword() &
    validRepass() &
    validRandom() &
    validBirthday()
  if (!flag) {
    return console.log('请正确填写用户信息')
  }
  console.log('表单可以提交，建议使用ajax')
}

// 表单重置事件，单击reset按钮时会触发
form.onreset = function (e) {
  valid.forEach((item) => {
    item.innerHTML = '*'
    item.style.color = '#000'
  })
}
/*-------------验证生日--------------*/
birthday.onchange = validBirthday
function validBirthday() {
  let v = birthday.value
  let span = birthday.nextElementSibling
  span.innerHTML = ''
  // 验证非空
  if (!v) {
    span.innerHTML = '生日不能空'
    span.style.color = 'red'
    return false
  }
  // 查分年月日
  let [y, m, d] = v.split('-')
  console.log(y, m, d)
  // 验证年
  let date = new Date()
  let nowY = date.getFullYear()
  if (y < 0 || y > nowY) {
    span.innerHTML = `生日的年份必须在0-${nowY}范围`
    span.style.color = 'red'
    return false
  }
  // 验证月份
  if (m < 1 || m > 12) {
    span.innerHTML = `生日的月份必须在1-12范围`
    span.style.color = 'red'
    return false
  }
  // 验证天数
  let days = 28
  if ((y % 4 === 0 && y % 100 !== 0) || y % 400 === 0) {
    days = 29
  }
  let list = [31, days, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
  if (d > list[m - 1] || d < 1) {
    span.innerHTML = `生日的天必须在1-${list[m - 1]}范围`
    span.style.color = 'red'
    return false
  }
  span.innerHTML = '生日正确'
  span.style.color = 'green'
  return true
}

/*-------------验证随机值--------------*/
random.onblur = validRandom
function validRandom() {
  let v1 = randomNum.value.toLowerCase()
  let v = random.value.toLowerCase()
  let span = random.nextElementSibling
  span.innerHTML = ''
  if (v !== v1) {
    span.innerHTML = '随机值输入错误'
    span.style.color = 'red'
    return false
  }
  span.innerHTML = '随机值正确'
  span.style.color = 'green'
  return true
}

/*-------------失去焦点事件, 验证用户名--------------*/
usernameInput.onblur = validUsername
function validUsername() {
  let input = document.querySelector('#username')
  let v = input.value
  let span = input.nextElementSibling
  span.innerHTML = ''
  // 验证非空
  if (!v || !v.trim()) {
    span.innerHTML = '用户名不能空'
    span.style.color = 'red'
    return false
  }
  // 首字母数字字母下划线组成3-12
  let reg = new RegExp(/^[a-zA-Z]\w{2,11}$/)
  /*
    /^ 表示开头
    $/ 表示结尾
    [a-zA-Z] 所有字母的范围
    \w 数字字母下划线
    {2,11} 表示前面的\w出现2-11次
  */
  if (!reg.test(v)) {
    span.innerHTML = '用户名首字母数字字母下划线组成3-12位'
    span.style.color = 'red'
    return false
  }
  span.innerHTML = '用户名正确'
  span.style.color = 'green'
  return true
}

/*-------------爱好发生变化, 验证爱好至少选中一个--------------*/
for (let i = 0; i < hobbyList.length; i++) {
  hobbyList[i].onchange = validHobby
}
function validHobby() {
  // 数组中任意一个元素符合条件就返回true ,都不符合条件就返回false
  let flag = hobbyList.some((item) => item.checked === true)
  if (!flag) {
    hobbyMsg.innerHTML = '爱好至少选一个'
    hobbyMsg.style.color = 'red'
    return false
  }
  hobbyMsg.innerHTML = '爱好已选中'
  hobbyMsg.style.color = 'green'
  return true
}

/*-------------下拉选择年龄，如果没有选中提升错误--------------*/
ageSelect.onchange = validAge
function validAge() {
  let v = ageSelect.value
  console.log(v)
  let span = ageSelect.nextElementSibling
  span.innerHTML = ''
  if (!v) {
    span.innerHTML = '请选择年龄'
    span.style.color = 'red'
    return false
  }
  span.innerHTML = '年龄正确'
  span.style.color = 'green'
  return true
}

/*-------------验证头像--------------*/
pic.onchange = validPic
function validPic() {
  let { files } = pic
  console.log(files)
  let span = pic.nextElementSibling
  if (files.length === 0) {
    span.innerHTML = '请添加图片'
    span.style.color = 'red'
    return false
  }
  // 获得上传文件对象，验证其类型和大小
  let file = files[0]
  let { type, size } = file
  // 验证类型
  let reg = /^jpg|jpeg|gif|bmp|webp|png$/
  // 后缀  image/png
  let suffix = type.substring(type.indexOf('/') + 1) // png
  if (!reg.test(suffix)) {
    span.innerHTML = '请添加图片类型文件'
    span.style.color = 'red'
    return false
  }
  // 验证大小 500KB
  if (size > 500 * 1024) {
    span.innerHTML = '图片大小<=500KB'
    span.style.color = 'red'
    return false
  }
  span.innerHTML = '图片正确'
  span.style.color = 'green'
  return true
}

/*-------------验证邮箱--------------*/
// 绑定失去焦点事件
email.onblur = validEmail
// 验证邮箱的函数
function validEmail() {
  // 获得邮箱是值
  let v = email.value
  // 获得span元素，主要用于提示验证的信息
  let span = email.nextElementSibling
  // 清空元素
  span.innerHTML = ''
  // 验证非空
  if (!v || !v.trim()) {
    span.innerHTML = '邮箱不能空'
    span.style.color = 'red'
    return false
  }
  // 声明邮箱的正则表达式
  let reg = /^[a-zA-Z0-9]+@[a-zA-Z0-9]{2,}(\.com|\.cn|\.com\.cn|\.org|\.net|\.edu)$/
  // 邮箱不符合规则
  if (!reg.test(v)) {
    span.innerHTML = '非法的邮箱'
    span.style.color = 'red'
    return false
  }
  // 邮箱验证通过
  span.innerHTML = '邮箱正确'
  span.style.color = 'green'
  return true
}

/*-------------验证电话--------------*/
phone.onblur = validPhone
function validPhone() {
  let v = phone.value
  // 获得span元素，主要用于提示验证的信息
  let span = phone.nextElementSibling
  // 清空元素
  span.innerHTML = ''
  // 验证非空
  if (!v || !v.trim()) {
    span.innerHTML = '电话不能空'
    span.style.color = 'red'
    return false
  }
  // 通过正则判断电话是否正确
  let reg = /^1[3-9]\d{9}$/
  if (!reg.test(v)) {
    span.innerHTML = '电话1开头，第二位3-9任意数字，共11位数字'
    span.style.color = 'red'
    return false
  }
  // 验证通过
  span.innerHTML = '电话正确'
  span.style.color = 'green'
  return true
}

/*-------------验证密码--------------*/
password.onblur = validPassword
// 验证密码函数
function validPassword() {
  // 获得密码的值
  let v = password.value.trim()
  // 获得span元素
  let span = password.nextElementSibling
  span.innerHTML = ''
  // 判断密码不能空
  if (!v) {
    span.innerHTML = '密码不能空'
    span.style.color = 'red'
    return false
  }
  // 判断密码的长度
  let len = v.length
  if (len < 6 || len > 12) {
    span.innerHTML = '密码长度6-12位'
    span.style.color = 'red'
    return false
  }
  // 密码必须包含大写字符
  let upperCaseCode = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
  // 判断密码中是否有大写字符false表示没有，true表示有
  let flag = false
  for (let item of v) {
    if (upperCaseCode.includes(item)) {
      flag = true
      break
    }
  }
  if (!flag) {
    span.innerHTML = '密码必须包含大写字母'
    span.style.color = 'red'
    return false
  }
  // 密码必须包含数字
  let digitCode = '0123456789'
  flag = false
  for (let item of v) {
    if (digitCode.includes(item)) {
      flag = true
      break
    }
  }
  if (!flag) {
    span.innerHTML = '密码必须包含数字'
    span.style.color = 'red'
    return false
  }
  // 密码必须包含特殊字符
  let spacialCode = `!@#$%^&*()_+,.~<>?":"][]\/';`
  flag = false
  for (let item of v) {
    if (spacialCode.includes(item)) {
      flag = true
      break
    }
  }
  if (!flag) {
    span.innerHTML = '密码必须包含特殊字符'
    span.style.color = 'red'
    return false
  }
  span.innerHTML = '密码正确'
  span.style.color = 'green'
  return true
}

/*-------------验证重复密码--------------*/
repassword.onblur = validRepass
function validRepass() {
  let span = repassword.nextElementSibling
  span.innerHTML = ''
  // 先判断密码框输入是否正确
  let flag = validPassword()
  // 验证没通过，提示错误信息
  if (!flag) {
    span.innerHTML = '错误的密码'
    span.style.color = 'red'
    return false
  }
  // 如果正确才获得当前重复密码和密码，比对密码是否正确
  let v = repassword.value
  let v1 = password.value
  if (v !== v1) {
    span.innerHTML = '重复密码输入不一致'
    span.style.color = 'red'
    return false
  }
  // 验证通过
  span.innerHTML = '重复密码正确'
  span.style.color = 'green'
  return true
}
